<template>
	<view class="detail" v-if="xwItem[0]">
		<view class="detail-title">
			<text class="title">{{xwItem[0].title}}</text>

		</view>
		<div class="author">
			<image src="/static/logo.png" class="touxiang" mode=""></image>
			<view class="author-center">
				<view class="name">{{xwItem[0].author}}</view>
				<view class="time">
					{{xwItem[0].publishDate}}
				</view>
			</view>

			<button type="default">关注</button>
		</div>
		<view class="detail-content">
			<text v-if="xwItem[0].commentNum[0]">{{xwItem[0].content[0]}}</text>
			<image :src="xwItem[0].images[0]" mode="aspectFit"></image>
			<text>{{xwItem[0].content[1]}}</text>
			<image :src="xwItem[0].images[1]" mode="aspectFit"></image>
			<text>{{xwItem[0].content[2]}}</text>
			<image :src="xwItem[0].images[2]" mode="aspectFit"></image>

		</view>
		<view class="tuijian">
			<view class="title">
				相关推荐
			</view>
			<TuijianItem></TuijianItem>
		</view>
		<view class="tuijian">
			<view class="title">
				热门评论
			</view>
			<DetailComment :xwid="itemId"></DetailComment>
		</view>
		<view class="bottom-bar">
			<input type="text" placeholder="说点什么" />
			<view class="comment-icon">
				<image src="../../static/editor.png" mode="aspectFit"></image>
				<image src="../../static/collection_fill.png" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import TuijianItem from "../../components/newsDetails/tuijianItem.vue"
	import DetailComment from "../../components/newsDetails/DetailComment.vue"
	export default {
		data() {
			return {
				itemId: '',
				xwItem: {},
			}
		},
		methods: {
			getData() {
				uniCloud.callFunction({
					name: 'getDetail',
					data: {
						id: this.itemId // 传递动态的新闻ID
					},
					success: (e) => {
						console.log("获取新闻内容成功", e.result);
						this.xwItem = e.result.data;
					},
					fail: (error) => {
						console.error("获取新闻内容失败", error);
					}

				});
			}
		},
		onLoad(options) {
			// options对象包含了所有传递过来的查询参数
			// const item = options;
			this.itemId = options.id;
			// 现在可以使用itemId来获取详情数据或进行其他操作
		},
		mounted() {
			this.getData()
		},
		components: {
			TuijianItem,
			DetailComment
		}
	}
</script>

<style>
	.touxiang {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.detail {
		padding: 20rpx;
	}

	.author {
		margin: 50rpx 0;
		justify-content: space-between;
		display: flex;
		gap: 20rpx;
	}

	.author button {
		width: 120rpx;
		height: 60rpx;
		font-size: 26rpx;
		background-color: #F5433F;
		color: white;

	}

	.time {
		font-size: 26rpx;
		color: #757575;
	}

	.name {
		font-size: 40rpx;
	}

	.author-center {
		width: 60%;
	}

	.title {
		font-size: 40rpx;
	}

	.detail-content {
		padding: 30rpx;
		width: 100%;
	}

	.detail-content text {
		padding: 30rpx 0;
		display: block;
		white-space: pre-wrap;
		/* 允许自动换行 */
		word-break: break-all;
		/* 单词内也可以断开换行 */
		width: 90%;
	}

	.tuijian .title {
		border-bottom: #F5433F solid 6rpx;
		width: max-content;
		padding-top: 40rpx;
	}

	.comment-icon {
		display: flex;
		gap: 30rpx;
	}

	.comment-icon image {
		height: 80rpx;
		width: 50rpx;
	}

	.bottom-bar input {
		color: #000;
		background-color: #fff;
		width: 80%;
		padding: 30rpx 30rpx 30rpx 40px;
		box-sizing: border-box;
		border: 1px solid #ddd;
		border-radius: 40rpx;
	}

	.bottom-bar {
		align-items: center;
		padding: 10rpx;
		width: 100%;
		background-color: #f3f3f3;
		position: fixed;
		display: flex;
		left: 0;
		bottom: 0;
	}
</style>